<script setup>
import { watch, onMounted, ref } from 'vue';
import { RouterView } from 'vue-router';
import { ElConfigProvider } from 'element-plus';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import en from 'element-plus/es/locale/lang/en';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { storeToRefs } from 'pinia';
import { useCommonStore } from '@/stores';
import RouterLoading from './components/RouterLoading.vue';

const commonStore = useCommonStore();

const { i18nLocale } = storeToRefs(commonStore);
const locale = ref();

watch(
  i18nLocale,
  (val) => {
    if (val == 'zh') {
      // dayjs国际化
      dayjs.locale('zh-cn');
      locale.value = zhCn;
    } else {
      dayjs.locale('en');
      locale.value = en;
    }
  },
  { deep: true },
);

onMounted(() => {
  dayjs.locale('zh-cn');
  locale.value = zhCn;
});
</script>

<template>
  <ElConfigProvider :locale="locale">
    <Suspense>
      <template #default>
        <RouterView v-slot="{ Component, route }">
          <Transition :name="route.meta.transitionName" mode="out-in">
            <Component :is="Component" />
          </Transition>
        </RouterView>
      </template>
      <template #fallback>
        <RouterLoading />
      </template>
    </Suspense>
  </ElConfigProvider>
</template>
